<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_列表渲染</title>
</head>
<body>

<!--
1. 列表显示
  数组: v-for / index
  对象: v-for / key
2. 列表的更新显示
  删除item
  替换item
-->

<div id="demo">
  <h2>测试: v-for 遍历数组</h2>
  <ul>
    <li v-for="(p, index) in persons" :key="index">
      序号：{{index}}，姓名：{{p.name}}，年龄：{{p.age}}岁
      ---<button @click="delP(index)">删除</button>
      ---<button @click="updateP(index, {name:'小刘',age:'22'})">更新为小刘，22岁</button>
    </li>
  </ul>

  <button @click="addP({name: '小赵', age: 18})">添加</button>

  <h2>测试: v-for 遍历对象</h2>

  <ul>
    <li v-for="(item, key) in persons[1]" :key="key">{{key}}={{item}}</li>
  </ul>

</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  // vue本身知识监视了persons的改变，并没有监视数组内部数据的改变
  // vue重写了数组中一系列改变数组内部数据的方法（先调用原生，再更新界面）-->数组内部改变，界面改变
  new Vue({
    el: '#demo',
    data: {
      persons: [
        {name: '小明', age:18},
        {name: '小张', age:17},
        {name: '小王', age:19},
        {name: '小李', age:16}
      ]
    },

    methods: {
      delP (index) { // 删除persons中的指定index的p
        this.persons.splice(index, 1) // 调用了不是原生数组的splice(), 而是一个变异(重写)方法
              // 1. 调用原生的数组的对应方法
              // 2. 更新界面
      },

      updateP (index, newP) {
        console.log('updateP', index, newP)
        // this.persons[index] = newP  // 并没有改变persons本身，数组内部发生了变化，但并没有调用变异方法，cue不会更新界面
        this.persons.splice(index, 1, newP)
        // this.persons = []
      },

      addP (newP) {
        this.persons.push(newP) // push()添加
      }
    }
  })
</script>
</body>
</html>
